*{
    margin: 0%;
    padding: 0%;
}

.slider{
    position: absolute;
    left: 0px;
    /* border: 1px solid black; */
    width: 100%;
    height: 67vh;
    z-index: -1;
}

.slider-box{
    animation-name: slider;
    animation-duration: 15s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes slider{
    0%{
        transition: 2s;
        background-image: url('../../banners/banner8.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }

    25%{
        transition: 2s;
        background-image: url('../../banners/banner3.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }
    45%{
        transition: 2s;
        background-image: url('../../banners/banner3.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }
    65%{
        transition: 2s;
        background-image: url('../../banners/banner2.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }
    85%{
        transition: 2s;
        background-image: url('../../banners/banner5.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }
    100%{
        transition: 2s;
        background-image: url('../../banners/banner6.jpg');
        /* background-repeat: no-repeat; */
        background-size: 1500px 500px;
        height: 500px;
    }
}

.banner{
    position: relative;
    top: 20px;
    left:350px;
    width:1000px;
    height: 250px;
}
.banner:hover{
       transition: 0.5s;
      transform: scale(105%);
      cursor: pointer;
      
}